import React, { useEffect } from 'react';
// 引入影院分布接口
import { cinemasInfo } from '@/api/cinema'

const Index = () => {
  useEffect(() => {
    cinemasInfo().then(res => {
      // console.log('影院分布', res)
      if (res.data.errNo === 0) {
        // 截取一部分影院地址数据
        const addresslist = res.data.paginate.slice(0, 10)
        console.log('addresslist', addresslist)
        var map = new window.BMapGL.Map('container');
        var point = new window.BMapGL.Point(116.404, 39.925);
        map.centerAndZoom(point, 15);
        // 创建点标记
        // var marker = new window.BMapGL.Marker(point);
        // map.addOverlay(marker);
        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true)
        // 设置地图的倾斜角度
        // map.setHeading(64.5);   //设置地图旋转角度
        // map.setTilt(73);       //设置地图的倾斜角度
        addresslist.map(({gpsaddress}) => {
          // 06: 设置地图的点坐标
          var point = new window.BMapGL.Point(gpsaddress.split(',')[0], gpsaddress.split(',')[1]);
          // 07: 根据点坐标给地图设置marker 标记
          var marker = new window.BMapGL.Marker(point);
          //  创建标注
          map.addOverlay(marker);
          // 08: 创建信息窗口
          var opts = {
            width: 200,
            height: 80,
            title: '当前位置:'
          };

          // 创建地理编码实例      
          var myGeo = new window.BMapGL.Geocoder();
          // 根据坐标得到地址描述    
          myGeo.getLocation(new window.BMapGL.Point(gpsaddress.split(',')[0], gpsaddress.split(',')[1]), function (result) {
            if (result) {
              // alert(result.address);
              // 创建信息窗口对象(每一个坐标点marker 都对应一个地址描述,这样需要用到逆地址解析)
              var infoWindow = new window.BMapGL.InfoWindow(result.address, opts);
              // 点标记添加点击事件
              marker.addEventListener('click', function () {
                map.openInfoWindow(infoWindow, point); // 开启信息窗口
              });
            }
          });
        })
        // 创建信息窗口
        // var opts = {
        //   width: 200,
        //   height: 100,
        //   title: '故宫博物院'
        // };
        // var infoWindow = new window.BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);
        // // 点标记添加点击事件
        // marker.addEventListener('click', function () {
        //   map.openInfoWindow(infoWindow, point); // 开启信息窗口
        // });
      }
    })
  }, [])

  return (
    <div id="container" style={{
      overflow: 'hidden', width: '100%', height: '100%', margin: 0,
      fontFamily: "微软雅黑",
    }}>
      影院列表
    </div>
  );
}

export default Index;
